<template>
  <div class="about">
    <h1>动态阴影效果演示</h1>
    
    <!-- 阴影控制面板 -->
    <div class="shadow-controls">
      <h2>阴影控制器</h2>
      
      <div class="control-group">
        <label>水平偏移 (X): {{ shadowConfig.offsetX }}px</label>
        <input 
          type="range" 
          v-model.number="shadowConfig.offsetX" 
          min="-50" 
          max="50" 
          step="1"
        />
      </div>
      
      <div class="control-group">
        <label>垂直偏移 (Y): {{ shadowConfig.offsetY }}px</label>
        <input 
          type="range" 
          v-model.number="shadowConfig.offsetY" 
          min="-50" 
          max="50" 
          step="1"
        />
      </div>
      
      <div class="control-group">
        <label>模糊半径: {{ shadowConfig.blurRadius }}px</label>
        <input 
          type="range" 
          v-model.number="shadowConfig.blurRadius" 
          min="0" 
          max="50" 
          step="1"
        />
      </div>
      
      <div class="control-group">
        <label>扩散半径: {{ shadowConfig.spreadRadius }}px</label>
        <input 
          type="range" 
          v-model.number="shadowConfig.spreadRadius" 
          min="-20" 
          max="20" 
          step="1"
        />
      </div>
      
      <div class="control-group">
        <label>阴影颜色:</label>
        <input 
          type="color" 
          v-model="shadowConfig.color"
          class="color-picker"
        />
      </div>
      
      <div class="control-group">
        <label>透明度: {{ shadowConfig.opacity }}%</label>
        <input 
          type="range" 
          v-model.number="shadowConfig.opacity" 
          min="0" 
          max="100" 
          step="1"
        />
      </div>
      
      <div class="control-group">
        <label>
          <input 
            type="checkbox" 
            v-model="shadowConfig.inset"
          />
          内阴影
        </label>
      </div>
      
      <div class="control-group">
        <button @click="resetShadow" class="reset-btn">重置阴影</button>
        <button @click="copyShadowCSS" class="copy-btn">复制CSS</button>
      </div>
      
      <div class="css-output">
        <h3>生成的CSS:</h3>
        <code>{{ generatedCSS }}</code>
      </div>
    </div>
    
    <!-- 阴影预览区域 -->
    <div class="preview-area">
      <h2>预览效果</h2>
      
      <div class="preview-items">
        <!-- 文本阴影预览 -->
        <div class="preview-item">
          <h3>文本阴影</h3>
          <p class="text-shadow-demo" :style="{ textShadow: textShadowStyle }">
            这是文本阴影效果演示
          </p>
        </div>
        
        <!-- 盒子阴影预览 -->
        <div class="preview-item">
          <h3>盒子阴影</h3>
          <div class="box-shadow-demo" :style="{ boxShadow: boxShadowStyle }">
            这是一个带阴影的盒子
          </div>
        </div>
        
        <!-- 按钮阴影预览 -->
        <div class="preview-item">
          <h3>按钮阴影</h3>
          <button class="button-shadow-demo" :style="{ boxShadow: boxShadowStyle }">
            悬停按钮
          </button>
        </div>
        
        <!-- 卡片阴影预览 -->
        <div class="preview-item">
          <h3>卡片阴影</h3>
          <div class="card-shadow-demo" :style="{ boxShadow: boxShadowStyle }">
            <h4>卡片标题</h4>
            <p>这是一个带动态阴影的卡片组件</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 阴影配置对象
const shadowConfig = ref({
  offsetX: 2,
  offsetY: 2,
  blurRadius: 8,
  spreadRadius: 0,
  color: '#000000',
  opacity: 30,
  inset: false
})

// 将十六进制颜色转换为rgba
const hexToRgba = (hex: string, opacity: number) => {
  const r = parseInt(hex.slice(1, 3), 16)
  const g = parseInt(hex.slice(3, 5), 16)
  const b = parseInt(hex.slice(5, 7), 16)
  return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`
}

// 计算盒子阴影样式
const boxShadowStyle = computed(() => {
  const { offsetX, offsetY, blurRadius, spreadRadius, color, opacity, inset } = shadowConfig.value
  const rgba = hexToRgba(color, opacity)
  const insetStr = inset ? 'inset ' : ''
  return `${insetStr}${offsetX}px ${offsetY}px ${blurRadius}px ${spreadRadius}px ${rgba}`
})

// 计算文本阴影样式（文本阴影不支持spread和inset）
const textShadowStyle = computed(() => {
  const { offsetX, offsetY, blurRadius, color, opacity } = shadowConfig.value
  const rgba = hexToRgba(color, opacity)
  return `${offsetX}px ${offsetY}px ${blurRadius}px ${rgba}`
})

// 生成的CSS代码
const generatedCSS = computed(() => {
  return `box-shadow: ${boxShadowStyle.value};`
})

// 重置阴影
const resetShadow = () => {
  shadowConfig.value = {
    offsetX: 2,
    offsetY: 2,
    blurRadius: 8,
    spreadRadius: 0,
    color: '#000000',
    opacity: 30,
    inset: false
  }
}

// 复制CSS到剪贴板
const copyShadowCSS = async () => {
  try {
    await navigator.clipboard.writeText(generatedCSS.value)
    alert('CSS代码已复制到剪贴板！')
  } catch (err) {
    console.error('复制失败:', err)
    alert('复制失败，请手动复制')
  }
}
</script>

<style scoped>
.about {
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.about h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 40px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.shadow-controls {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.shadow-controls h2 {
  margin-bottom: 25px;
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

.control-group {
  margin-bottom: 20px;
}

.control-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #34495e;
}

.control-group input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 5px;
  background: #ddd;
  outline: none;
  -webkit-appearance: none;
}

.control-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3498db;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
}

.control-group input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3498db;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
}

.color-picker {
  width: 60px;
  height: 40px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.control-group input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
}

.reset-btn, .copy-btn {
  padding: 10px 20px;
  margin-right: 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.reset-btn {
  background: #e74c3c;
  color: white;
}

.reset-btn:hover {
  background: #c0392b;
  transform: translateY(-2px);
}

.copy-btn {
  background: #2ecc71;
  color: white;
}

.copy-btn:hover {
  background: #27ae60;
  transform: translateY(-2px);
}

.css-output {
  margin-top: 25px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

.css-output h3 {
  margin-bottom: 10px;
  color: #2c3e50;
}

.css-output code {
  display: block;
  background: #2c3e50;
  color: #ecf0f1;
  padding: 15px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  word-break: break-all;
  font-size: 14px;
}

.preview-area {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.preview-area h2 {
  margin-bottom: 25px;
  color: #2c3e50;
  border-bottom: 2px solid #e74c3c;
  padding-bottom: 10px;
}

.preview-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.preview-item h3 {
  margin-bottom: 15px;
  color: #34495e;
  font-size: 18px;
}

.text-shadow-demo {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
  text-align: center;
  padding: 20px;
  background: #ecf0f1;
  border-radius: 8px;
}

.box-shadow-demo {
  width: 100%;
  height: 120px;
  background: linear-gradient(45deg, #3498db, #2ecc71);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 16px;
}

.button-shadow-demo {
  padding: 15px 30px;
  background: linear-gradient(45deg, #e74c3c, #c0392b);
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.button-shadow-demo:hover {
  transform: translateY(-3px);
}

.card-shadow-demo {
  background: white;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #ecf0f1;
}

.card-shadow-demo h4 {
  margin-bottom: 15px;
  color: #2c3e50;
  font-size: 18px;
}

.card-shadow-demo p {
  color: #7f8c8d;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .about {
    padding: 10px;
  }
  
  .shadow-controls {
    padding: 20px;
  }
  
  .preview-items {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .about {
    padding: 40px;
  }
}
</style>
